<template>
  <div class="activity-content" v-loading="infoLoading">
  <!--  进入会场页面 -->
    <div class="left">
      <div class="activity-left">
        <div class="top">
          <div class="title">{{info.title}}</div>
          <div class="striping type"></div>
          <div class="holding-time type">举办时间：{{info.eventTimeStart}} ⾄ {{info.eventTimeEnd}}</div>
          <div class="sponsor type">主办单位：{{info.organizer}}</div>
          <div class="undertake type">承办单位：{{info.organizerTake}}</div>
          <div class="assist type">协办单位：{{info.organizerCo}}</div>
        </div>
        <div class="bottom">
          <div class="firm rule">
            <div>招聘企业</div>
            <span>{{info.jobFairEnterpriseInformation.companyCount}}</span>
            &nbsp
            家
          </div>
          <img src="@/assets/index/rule.png" alt="">
          <div class="post rule">
            <div>招聘职位</div>
            <span>{{info.jobFairEnterpriseInformation.positionCount}}</span>
            &nbsp
            个
          </div>
          
          <img src="@/assets/index/rule.png" alt="">
          <div class="page-view rule">
            <div>浏览量</div>
            <span>{{info.browseNumber}}</span>
            &nbsp
            次
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="select">
        <router-link :to="{ path:'/Activity/Introduce',query:{id:info.id}}">
          <div class="introduce share" style="font-family: 'fzhzgbjianti';">活动介绍</div>
        </router-link>
        <router-link :to="{ path:'/Activity/Enterprises',query:{id:info.id}}">
          <div class="participating-enterprises share" style="font-family: 'fzhzgbjianti';">参会企业</div>
        </router-link>
        <!-- <router-link :to="{ path:'/Activity/Position',query:{id:info.id}}">
          <div class="participant-position share" style="font-family: 'fzhzgbjianti';">参会岗位</div>
        </router-link> -->

<!--        <div class="participating-enterprises share">参会企业</div>-->
<!--        <div class="participant-position share">参会岗位</div>-->
      </div>
      <div class="content">
        <router-view/>
        <div class="title"></div>
        <div class="small-title"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {getByIdApi} from "@/api/fair";
export default {
  name: "Activity",
  data(){
    return{
      infoLoading:false,
      info:{
        title:'',
        eventTimeEnd:'',
        eventTimeStart:'',
        organizer:'',
        organizerCo:'',
        organizerTake:'',
        qyCount:'',
        zwCount:'',
        browseNumber:'',
        jobFairEnterpriseInformation:{
          companyCount:0,
          positionCount:0
        }
      }
    }
  },
  methods:{
    getDetail() {
      this.infoLoading = true
      getByIdApi({id:this.id}).then((res) => {
       
        this.info = res;
      }).finally(() => {
        this.infoLoading = false
      })
    },
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.activity-content{
  //display: flex;
  margin-top: 35px;
  //background-color: #ffffff;
  border-radius: 15px;
  .left{
    width: 800px;
    margin: 0 auto;
    .activity-left{
      .top{
        box-sizing: border-box;
        width: 800px;
        height: 430px;
        background-color: #fff;
        margin-bottom: 15px;
        border-radius: 15px;
        padding: 30px 20px;
        .title{
          line-height: 38px;
          font-weight: 800;
          font-size: 25px;
          color: #3F3F3F;
        }
        .striping{
          margin-top: 20px;
          width: 100%;
          height: 2px;
          background-color: #D8D8D8;
        }
        .type{
          font-size: 18px;
          margin-top: 35PX;
        }
      }
      .bottom{
        width: 800px;
        margin: 30px auto;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        height: 130px;
        background-color: #ffffff;
        border-radius: 15px;
        padding: 30px 20px;
        line-height: 30px;
        color: #4B4B4B;
        font-size: 18px;
        text-align: center;
        span{
          font-size: 22px;
          color: #498CF3;
          font-weight: 900;
        }
        .rule{
          //display: flex;
          //justify-content: space-around;
          //flex-wrap: wrap;
          font-family: "fzhzgbjianti";
          line-height: 40px;
          display: flex;
          align-items: center;
          div{
            margin-right: 20px;
          }
        }
        img{
          height: 38px;
          margin-top: 20px;
        }
      }
    }
  }
  .right{
    box-sizing: border-box;
    width: 800px;
    margin: 0 auto 20px;
    height: 700px;
    background-color: #fff;
    border-radius: 15px;
    padding: 30px 20px;
    .router-link-active {
      text-decoration: none;
      color: #4E8FF3;
    }
    a{
      text-decoration: none;
      color: #989898;
    }
  }
  .select{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    //background-color: red;
    padding: 10px 10px;
    font-size: 25px;
    //font-weight: 800;
    .share{
      margin-right: 25px;
    }
  }
  .content{
    padding: 10px 10px;
  }
}
</style>
